require(["config"],function () {
    require(["jquery"],function () {
       $(document).ready(function () {
            $(".top").load("publicTop.html")

           //1 点击图片切换
           $(".colorclass,.middle_bottom ul li").css({
               "cursor":"pointer"
           })
           $(".colorclass ul li,.middle_bottom ul li").click(function () {

               $(this).addClass("current").siblings().removeClass("current")

           })
           $(".colorclass ul li").click(function () {
               $(".middleBox img").attr("src",`images/middle${$(this).index()+1}.jpg`)
           })
           $(".middle_bottom ul li").click(function () {
               $(".middleBox img").attr("src",`images/xqbig${$(this).index()+1}.jpg`)
           })
           //放大镜
            var $middlebox=$(".middleBox")
            var $middlearea=$(".middleArea")
           var $bigbox=$(".bigBox img")
           var $bigarea=$(".bigBox")
            var $marealeft
            var $mareatop


               $middlebox.mouseenter(function () {
                   $middlearea.show()
                   $bigarea.show()
                   $middlebox.mousemove(function (e) {
                       $marealeft=e.offsetX-$middlearea.width()/2
                       $mareatop=e.offsetY-$middlearea.height()/2
                       if ($marealeft<0){
                           $marealeft=0
                       } else if(
                           $marealeft>$middlebox.width()-$middlearea.width()
                       ){
                           $marealeft=$middlebox.width()-$middlearea.width()
                       }
                       if($mareatop<0){
                           $mareatop=0
                       }else if ($mareatop>$middlebox.height()-$middlearea.height()){
                           $mareatop=$middlebox.height()-$middlearea.height()
                       }
                       $middlearea.css({
                           left:$marealeft,
                           top:$mareatop
                       })
                       $bigbox.css({
                           left:$marealeft*($bigarea/$middlearea),
                           top:$mareatop*($bigarea/$middlearea)
                       })
                   })
               })

       })
    })
})